<template>
  <div class="app-container" >
    <div v-if="is_load">
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="菜单标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
      <el-form-item label="图标:" prop="icon">
        <icon-browser :icon="form.icon" @onChange="form.icon=$event" />
      </el-form-item>
        <el-form-item label="主菜单" prop="main_menu_id">
          <el-select
            v-model="form.main_menu_id"
            placeholder="请选择"
          >
            <el-option
              v-for="item in menu"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="二级菜单" prop="parent_id">
          <el-select
            v-model="form.parent_id"
            placeholder="不选为创建一级主菜单"
            clearable
          >
            <el-option
              v-for="item in parent"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件名">
          <el-input
            v-model="form.vue_url"
            :placeholder="form.parent_id>0?'请输入文件名如 index':'请输入文件夹名如 /user'"
          />
          <el-tag>{{form.parent_id>0?'请输入文件名如 "index" 编辑页需对应包含"form"':'请输入文件夹名如 "/user"'}}</el-tag>
        </el-form-item>
        <el-form-item label="菜单模块:" prop="module">
          <el-select v-model="form.module" placeholder="请选择">
            <el-option
              v-for="(item,i) in module_arr"
              :key="i"
              :label="item"
              :value="item">
            </el-option>
            </el-select>
      </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" placeholder="排序" />
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="form.is_show"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item label="是否显示在商户端">
          <el-switch
            v-model="form.is_shop"
            active-color="#13ce66"
            inactive-color="#ff4949"
          />
        </el-form-item>
        <el-form-item>
          <!-- <el-button icon="el-icon-close" circle @click="bk()" /> -->
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="onSubmit('form')"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import iconBrowser from '@/components/tool/iconBrowser'
export default {
  components:{iconBrowser},
  name:'menuForm',
  props:{
    request_url:'',
    id:0,
  },
  data() {
    return {
      options: [],
      editor: null,
      editorContent: "",
      is_load: false,
      form:{
        is_show:true,
        is_shop:false,
        is_default:true,
        module:'admin',
        icon:'',
        parent_id:''
      },
      main_menu: [],
      type_arr: [],
      module_arr: ['admin','shop'],
      icon: "",
      parent: [],
      rules: {
        title: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        main_menu_id: [
          {
            required: true,
            message: "请选择一级菜单",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.init_into();
  },
  methods: {
    bk(status) {
      this.$emit('bk',status)
    },
    onSubmit(formName) {
      const form = this.form;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          form.id = this.id;
          form.is_show = form.is_show?1:0
          form.is_shop = form.is_shop?1:0
          form.is_default = form.is_default?1:0
          this.get(this.request_url+"save", form, "POST").then((e) => {this.bk(1)});

        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!");
    },
    init_into() {
      this.listLoading = true;
      this.get(this.request_url+"info?id=" + this.id).then((e) => {
        this.parent = e.parent;
        this.type_arr = e.type_arr;

        this.menu = e.menu_arr;
        if(this.id>0){
          this.form = e.info.tpl;
        this.form.is_default=this.form.is_default == 1 
        this.form.is_show=this.form.is_show == 1 
        this.form.is_shop=this.form.is_shop == 1 
        this.icon = this.form.icon;

        }
        this.listLoading = false;
        this.is_load = true;
      });
    },
  },
  watch: {
    id:{
      handler (val, oldVal) {
        this.form={
          is_show:true,
          is_shop:false,
          is_default:true,
          module:'admin',
          icon:'',
          parent_id:''
        }
        this.init_into()
      },
    }
  }
};
</script>
